<template>
  <div class="pdf_js_container">
    <el-button type="primary" @click="getPdf">获取pdf</el-button>
    <div class="long_content_list" id="element-to-print">
      <EleTable class="pdf-group"></EleTable>
      <ImageComponent></ImageComponent>
      <ChartComponent></ChartComponent>
      <RichText></RichText>
      <pdfWord></pdfWord>
    </div>
  </div>
</template>

<script>
import TableComponent from "../../components/tableComponent.vue";
import ImageComponent from "../../components/ImageComponent.vue";
import RichText from "../../components/richText.vue";
import EleTable from "../../components/table.vue";
import ChartComponent from "../../components/echartComponent.vue";
import pdfWord from "../../components/pdfWord.vue";

import html2pdf from "html2pdf.js";
export default {
  name: "PagedJs",

  components: {
    TableComponent,
    TableComponent,
    ImageComponent,
    RichText,
    pdfWord,
    EleTable,
    ChartComponent,
  },

  mounted() {},

  methods: {
    getPdf() {
      var element = document.getElementById("element-to-print");
      var opt = {
        margin: 1,
        filename: "myfile.pdf",
        image: { type: "jpeg", quality: 0.98 },
        html2canvas: { scale: 2 },
        // jsPDF: { unit: "in", format: "letter", orientation: "portrait" },
      };

      // New Promise-based usage:
      html2pdf().set(opt).from(element).save();
    },
  },
};
</script>

<style lang="less">
.long_content_list {
  width: 1200px;
  margin: 0 auto;
}
</style>
